<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03猜数字游戏</title>
</head>
<body>
    <h3>已生成一个1~100之间的随机数:</h3>
    <input type="text" placeholder="请输入你猜的数字">
    <button onclick="guess()">点我验证</button>
    <h3>小提示:<span></span></h3>

    <script>
        //1.生成[1,100]之间的随机数
        //Math.random()生成[0,1)之间的随机小数 parseInt()转为整数
        let r = parseInt(Math.random()*100)+1;
        console.log('打个小抄'+r);
        //8.定义变量count来统计猜数字的次数
        let count = 0;
        //2.定义函数,每次点击按钮时调用
        function guess(){
            //3.根据标签名获取input元素中用户输入的值
            //此处是比较,所以不需要转为数值类型 '3'>10 比较的是数值
            let n = document.querySelector("input").value;
            //4.对数字进行合法性校验 如果是非数字 提示用户 且结束函数
            if(isNaN(n)){
                alert('请输入数字!');
                return;
            }
            //5.获取用来显示结果的span元素
            let span = document.querySelector("span");
            count++;
            //6.将用户输入的值与随机数作比较
            if(n>r){
                //7.将结果作为内容装到span中
                span.innerHTML = '猜大了!';
            }else if(n<r){
                span.innerHTML = '猜小了!';
            }else{
                //9.在猜对时同时显示猜数字的次数
                span.innerHTML = '恭喜你用了'+count+'次就猜对了!';
            }
        }
    </script>
</body>
</html>